<template>
	<!--pages/user_bill/user_bill.wxml-->
	<view class="user-bill">
		<tabs :active="active" line-width="40" @change="onChange">
			<tab title="全部">
				<view class="list mt20">
					<view v-for="(item, index) in lists" :key="index" class="item">
						<view class="bill-list bg-white">
							<view class="bill-item row-between">
								<view>
									<view class="black mb10">{{item.source_type}}</view>
									<view class="xs muted">{{item.create_time}}</view>
								</view>
								<view :class="'lg ' + (item.change_type == 1 ? 'income' : '')">{{item.change_amount}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png" />
						<text class="nr muted">暂无记录～</text>
					</view>
				</loading-footer>
			</tab>
			<tab title="支出" v-if="user_type == 'Administrator'">
				<view class="list mt20">
					<view v-for="(item, index) in lists" :key="index" class="item">
						<view class="bill-list bg-white">
							<view class="bill-item row-between">
								<view>
									<view class="black mb10">{{item.source_type}}</view>
									<view class="xs muted">{{item.create_time}}</view>
								</view>

								<view class="lg">{{item.change_amount}}</view>
							</view>
						</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png" />
						<text class="nr muted">暂无支出记录～</text>
					</view>
				</loading-footer>
			</tab>
			<tab title="收入" v-if="user_type == 'Administrator'">
				<view class="list mt20">
					<view v-for="(item, index) in lists" :key="index" class="item">
						<view class="bill-list bg-white">
							<view class="bill-item row-between">
								<view>
									<view class="black mb10">{{item.source_type}}</view>
									<view class="xs muted">{{item.create_time}}</view>
								</view>
								<view class="lg income">{{item.change_amount}}</view>
							</view>
						</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png"></image>
						<text class="nr muted">暂无收入记录～</text>
					</view>
				</loading-footer>
			</tab>
		</tabs>
	</view>
</template>

<script>
	import {
		getCapitalRecord
	} from "@/api/goodsBrand";
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"
	export default {
		data() {
			return {
				active: 0,
				lists: [],
				page: 1,
				user_type: 'staff',
				loadingStatus: loadingType.LOADING
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.active = parseInt(options.type);
			this.getAccountLogFun(this.active);
		},


		onReachBottom: function() {
			this.getAccountLogFun(this.active);
		},

		methods: {
			onChange(e) {
				this.active = e;
				this.cleanStatus();
				this.getAccountLogFun(e);
			},

			cleanStatus() {
				// 清理状态
				this.page = 1;
				this.lists = [];
				this.loadingStatus = loadingType.LOADING
			},

			getAccountLogFun(type) {
				let changeType = 0;
				changeType = type == 0 ? 0 : type == 1 ? 2 : 1;
				let {
					lists,
					loadingStatus,
					page
				} = this;
				var _this = this;
				getCapitalRecord({
					page:page,
					type: changeType
				}).then(res => {
					if (res) {
						_this.user_type = res.data.user_type;
						_this.page = res.data.page + 1;
						for(var key in res.data.lists){
							lists.push(res.data.lists[key]);
						}
						if(res.data.count > res.data.page * res.data.lists.length){
							_this.loadingStatus = loadingType.LOADING
						}else{
							_this.loadingStatus = loadingType.FINISHED
						}
					}
				})
			}

		}
	};
</script>
<style lang="scss">
	/* pages/user_bill/user_bill.wxss */
	.user-bill {
		.list {
			.item {
				.time {
					padding: 30rpx;
				}

				.bill-list {
					.bill-item {
						padding: 20rpx 30rpx;
						border-bottom: $-solid-border;

						.income {
							color: $-color-primary;
						}
					}
				}
			}
		}
	}

	.order-null {
		padding-top: 200rpx;
	}

	.data-null {
		padding-top: 150rpx;
	}
</style>
